<template>
  <div class="all">
    <div style="position: sticky;top: 0;z-index: 999">
      <img src="../../assets/返回圆@2x.png" @click="goBack()" alt="" class="back">
      <video controls preload="auto" :src="thisUrl" class="video"></video>
      <div class="playTitle listArr">
        <ul>
          <li>
            <p class="playTitle_title">{{video_title}}</p>
            <p class="" style="font-size: 13px;color: #999;">{{video_intro}}</p>
            <p class="playTitle_time">发布时间: {{video_time}}</p>
            <p class="playTitle_bottom">
              <!--<span v-if="is_collect===0" @click="collect()">
                <img src="../assets/收藏未@2x.png"  alt="">
                <a>收藏</a>{{video_collectnum}}
              </span>
               <span v-else-if="is_collect===1" @click="collectCancell()">
                <img src="../assets/收藏@2x.png"  alt="">
                <a>收藏</a>{{video_collectnum}}
              </span>-->
              <span v-if="is_praise === 0" @click="like()">
               <img src="../../assets/点赞未@2x.png" alt="">
               <a>点赞</a>
               {{video_praisenum}}
             </span>
              <span v-else-if="is_praise === 1" @click="lickCancel()">
               <img src="../../assets/点赞@2x.png" alt="">
               <a>点赞</a>
               {{video_praisenum}}
              </span>
              <span  @click="onClick(1)"><img src="../../assets/评论@2x.png" alt="">
                <a>评论</a>
                {{video_commentnum}}
              </span>
              <span @click="showShare = true">
                <img src="../../assets/转发@2x.png" alt="">
                <a>分享</a>
              </span>
            </p>
          </li>
        </ul>
      </div>
      <div class="footer">
        <van-tabs
          v-model="active"
          @click="onClick"
          color="#1DA4F2"
          swipeable
          animated
          line-width="15px"
          line-height="2px"
          title-active-color="#1DA4F2"
          title-inactive-color="#333"
          swipe-threshold="4">
          <van-tab v-for="(item,index) in tagList"
                   :title="item" :key="index">
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <!--          视频目录内容-->
    <div class="content box" v-show="Tagindex === 0">
      <ul class="ulList"
          @click="goPlay(video.VIDEO_URL, video.ID, video.VIDEO_TYPE)"
          v-for="(video, videoIndex) in videoArr"
          :key="videoIndex">
        <li>
          <img class="videoImg" v-if="video.VIDEO_IMG !== undefined && video.VIDEO_IMG !== ''"
               :src="video.VIDEO_IMG" alt="">
          <img class="videoImg" v-else src="../../assets/康护到家.png" alt="">
          <div class="playImg">
            <img src="../../assets/播放@2x.png" alt="">
          </div>
          <p class="playDuration">{{video.VIDEO_DURATION}}</p>
        </li>
        <li class="li_videoBottom">
          <p class="videoTitle">{{video.VIDEO_TITLE}}</p>
          <p class="videoIntro">{{video.VIDEO_INTRO}}</p>
          <p class="isuser">
            <span>
              <img class="isuser_img" :src="video.PHOTO
                          " alt="">
              {{video.VIDEO_UPLOADER}}
            </span>
            <span>
              <img class="playNumber" src="../../assets/播放量.png" alt="">
              {{video.VIDEO_CLICKNUM}}
            </span>
          </p>
        </li>
      </ul>
    </div>
    <!--          评论标签的内容-->
    <div class="discuss_box box" v-show="Tagindex===1">
      <div class="discuss_content">
        <ul v-for="(item, index) in commentList" :key="index">
          <li class="liTop">
<!--            <img v-if="item.photo != undefined"-->
<!--                 :src="item.photo.length > 0 && item.photo.substring(0, 4) === 'http' ? item.photo : imgHttp + item.photo"-->
<!--                 alt="">-->
            <van-image
              round
              width="44px"
              height="44px"
              fit="cover"
              v-if="item.photo != undefined"
              :src="item.photo.length > 0 && item.photo.substring(0, 4) === 'http' ? item.photo : imgHttp + item.photo"
            />
            <van-image
              round
              width="44px"
              height="44px"
              fit="cover"
              v-else
              src="../../assets/photo.png"
            />
<!--            <img v-else src="../../assets/photo.png" alt="">-->
            <div>
              <span class="wx_name" v-if="item.nick_name != undefined">{{item.nick_name}}</span>
              <span class="wx_name" v-else>{{item.phone}}</span>
              <span class="sent_time">{{formatDate(item.created_at, 1)}}</span>
            </div>
          </li>
          <li class="liBottom">
            <span>{{item.comment}}</span>
          </li>
        </ul>
      </div>
      <div class="discuss">
        <input v-model="comment" type="text" class="editInput" placeholder="留下你的评论~">
        <input type="button" class="editBtn" value="发布" @click="release()">
      </div>
    </div>
    <!--          详情的内容-->
    <div class="xiang box" v-show="Tagindex===2">
      <img src="../../assets/xiang1.png" alt="">
      <img src="../../assets/xiang2.png" alt="">
    </div>
    <van-share-sheet
      v-model="showShare"
      :options="options"
      title="立即分享给好友"
      description=""
      @select="onSelect"
    />
  </div>
</template>

<script>
import wx from 'weixin-js-sdk'
import $ from 'jquery'
import videoHttp from '../../http/video.http'

export default {
  name: 'PlayVideo',
  data () {
    return {
      active: 0,
      showShare: false, // 分享展示
      options: [
        // { name: '微信', icon: 'wechat' },
        {name: '微博', icon: 'weibo'}
      ],
      imgHttp: videoHttp.imgHttp,
      Tagindex: 0,
      thisUrl: '', // 存储当前视频的链接
      videoArr: [], // 存储所有视频
      // videoRelevant: [], // 存储所有相关视频
      tagList: ['视频目录', '评论', '详情'],
      isCollect: false, // 是否收藏
      isLike: false, // 是否点赞
      USER_ID: '', // 用户id
      videoID: '', // 视频id
      videoTYPE: '', // 视频类型
      video_title: '', // 当前播放视频的 标题
      video_intro: '', // 当前视频介绍
      video_time: '', // 当前播放视频的 发布日期
      video_clicknum: '', // 当前播放视频的 视频点击数量
      video_collectnum: '', // 当前播放视频的 视频收藏数量
      video_commentnum: '', // 当前播放视频的 视频评论数量
      video_praisenum: '', // 当前播放视频的 视频点赞数量
      video_img: '', // 当前视频图片
      comment: '', // 评论的input内容
      commentList: [], // 某个视频评论的所有数据
      boxHeight: 0, // 判断box距离顶部距离
      is_collect: '', // 是否收藏
      is_praise: '' // 是否点赞
    }
  },
  mounted () {
    this.USER_ID = this.$utils.getUrlKey('userid')
    this.videoID = this.$route.query.videoId
    this.videoTYPE = this.$route.query.videoType
    // 跳转过来视频链接
    this.thisUrl = this.$route.query.videoUrl
    // 获取当前视频的点赞、收藏、评论个数
    this.videoDetail(this.videoID, this.USER_ID)
    // 获取当前所有视频
    this.getVideo(this.videoTYPE)
    // 获取当前视频的所有评论
    this.getComment()
    //
    this.boxHeight = $(window).height() - parseInt($('.box').offset().top) - 110
    $('.box').css({'height': this.boxHeight + 'px', 'overflow': 'auto'})
  },
  activated () {
  },
  created () {
    this.getApi()
  },
  methods: {
    // share (type) {
    //   var img = this.imgHttp + this.video_img
    //   var url = 'http://jmx-kfdj.com/vue_kfhl/playVideo?videoUrl=1604461067301.mp4&videoId=4&videoType=1&userid=d31eb7c0398d488ea1ba61ec46db0c1a'
    //   // qq空间分享接口
    //   if (type === 'QQ空间') {
    //     window.open('https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + document.location.href + '?sharesource=qzone&title=标题&pics=图片地址&summary= 描述')
    //   }
    //   // 新浪微博接口的传参
    //   if (type === '微博') {
    //     window.open('http://service.weibo.com/share/share.php?url=' + url +
    //       '?sharesource=weibo&title=标题&pic=' + img + '&appkey=微博平台申请的key')
    //   }
    //   // qq好友接口的传参
    //   if (type === 'qq') {
    //     window.open('http://connect.qq.com/widget/shareqq/index.html?url=' + document.location.href + '?sharesource=qzone&title=标题&pics=图片地址&summary= 描述')
    //   }
    //   if (type === '微信') {
    //     // 微信分享
    //     var url = window.location.href
    //     var encodePath = encodeURIComponent(url)
    //     var targetUrl = 'http://qr.liantu.com/api.php?text=' + encodePath
    //     window.open(url, 'weixin', 'height=320, width=320')
    //   }
    // },
    getShareInfo (tit, fxUrl) { // 如果分享的内容会根据情况变化，那么这里可以传入分享标题及url
      this.$http.getweixinjs()
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            wx.config({
              debug: true,
              appId: res.data.data.appid, // 必填，公众号的唯一标识
              timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
              signature: res.data.data.signature, // 必填，签名，见附录
              jsApiList: ['chooseWXPay']
              // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            })
            wx.checkJsApi({
              jsApiList: ['chooseWXPay'],
              success: function (res) {
              }
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
      wx.ready(function () {
        // 分享到朋友圈
        wx.onMenuShareTimeline({
          title: tit, // 分享时的标题
          link: fxUrl, // 分享时的链接
          // imgUrl: _this.pic, // 分享时的图标
          success: function () {
            console.log('分享成功')
          },
          cancel: function () {
            console.log('取消分享')
          }
        })
        // 分享给朋友
        wx.onMenuShareAppMessage({
          title: tit,
          desc: '这件商品终于优惠了，每件只需元',
          link: fxUrl,
          // imgUrl: _this.pic,
          type: '',
          dataUrl: '',
          success: function () {
            console.log('分享成功')
          },
          cancel: function () {
            console.log('取消分享')
          }
        })
      })
      // })
    },
    // 点击分享
    onSelect (option) {
      var title = this.video_title
      var img = this.video_img
      console.log(img)
      var str = 'http://jmx-kfdj.com/vue_kfhl/playVideo?videoUrl=1604461067301.mp4&videoId=4&videoType=1&userid=d31eb7c0398d488ea1ba61ec46db0c1a'
      if (option.name === '微信') {
        this.getShareInfo('转发我', str)
      } else if (option.name === '微博') {
        window.sharetitle = title// 分享的标题
        window.shareUrl = img// 分享显示的图片
        this.share()
      }
      // this.share(option.name)
      // this.showShare = false
    },
    share () {
      (function (s, d, e) {
        try {
        } catch (e) {
        }
        // eslint-disable-next-line one-var
        var f = 'http://v.t.sina.com.cn/share/share.php?',
          u = window.location.href,
          p = ['url=', e(u), '&title=', e(window.sharetitle), '&pic=', e(window.shareUrl)].join('')

        function a () {
          if (!window.open([f, p].join(''), 'mb', ['toolbar=0,status=0,resizable=1,width=620,height=450,left=', (s.width - 620) / 2, ',top=', (s.height - 450) / 2].join(''))) u.href = [f, p].join('')
        };
        if (/Firefox/.test(navigator.userAgent)) {
          setTimeout(a, 0)
        } else {
          a()
        }
      })(screen, document, encodeURIComponent)
    },
    getApi () {
      this.$http.getweixinjs()
        .then(res => {
          if (res.data.status === 'success') {
            wx.config({
              debug: false,
              appId: res.data.data.appid, // 必填，公众号的唯一标识
              timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
              signature: res.data.data.signature, // 必填，签名，见附录
              jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            })
            wx.checkJsApi({
              jsApiList: ['chooseWXPay'],
              success: function (res) {
              }
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击切换三个列表
    onClick (name, title) {
      // $('.box').css({'height': this.boxHeight + 'px', 'overflow': 'scroll'})
      this.Tagindex = name
      this.active = name
      if (name === 0) {
        // 获取当前所有视频
        this.getVideo(this.videoTYPE)
      } else if (name === 1) {
        // $('.discuss_content').css('height', '123px')
      }
    },
    // 收藏 http://jmx-kfdj.com/kfhl/minivideo/videocollect
    collect () {
      this.isCollect = true
      // axios.get('http://jmx-kfdj.com/kfhl/minivideo/videocollect', {params: {ID: this.videoID, USER_ID: this.USER_ID}})
      this.$http.videocollect({ID: this.videoID, USER_ID: this.USER_ID})
        .then(res => {
          // console.log(res)
          this.videoDetail(this.videoID, this.USER_ID)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 取消收藏 http://jmx-kfdj.com/kfhl/minivideo/videocollectcancel
    collectCancell () {
      this.isCollect = false
      // axios.get('http://jmx-kfdj.com/kfhl/minivideo/videocollectcancel', {params: {ID: this.videoID, USER_ID: this.USER_ID}})
      this.$http.videocollectcancel({ID: this.videoID, USER_ID: this.USER_ID})
        .then(res => {
          // console.log(res)
          this.videoDetail(this.videoID, this.USER_ID)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点赞 http://jmx-kfdj.com/kfhl/minivideo/videopraise
    like () {
      this.isLike = true
      // axios.get('http://jmx-kfdj.com/kfhl/minivideo/videopraise', {params: {ID: this.videoID, USER_ID: this.USER_ID}})
      this.$http.videopraise({ID: this.videoID, USER_ID: this.USER_ID})
        .then(res => {
          // console.log(res)
          this.videoDetail(this.videoID, this.USER_ID)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 取消点赞 http://jmx-kfdj.com/kfhl/minivideo/videopraisecancel
    lickCancel () {
      this.isLike = false
      // axios.get('http://jmx-kfdj.com/kfhl/minivideo/videopraisecancel', {params: {ID: this.videoID, USER_ID: this.USER_ID}})
      this.$http.videopraisecancel({ID: this.videoID, USER_ID: this.USER_ID})
        .then(res => {
          // console.log(res)
          this.videoDetail(this.videoID, this.USER_ID)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击更改视频路径
    goPlay (url, videoId, videoType) {
      this.videoID = videoId
      this.videoTYPE = videoType
      // 点击视频是否成功
      this.getPlayUrl(videoId)
      // 视频详情
      this.videoDetail(videoId, this.USER_ID)
      // 评论列表
      this.getComment()
      this.thisUrl = url
    },
    // 获取 当前类型 的视频 http://jmx-kfdj.com/kfhl/minivideo/getVideosByType
    getVideo (type) {
      this.$http.getVideosByType({VIDEO_TYPE: type})
        .then(res => {
          console.log(res)
          this.videoArr = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 这条视频详情记录 视频收藏数量 视频评论数量 视频点赞数量http://jmx-kfdj.com/kfhl/minivideo/detail
    videoDetail (id, userid) {
      // axios.get('http://jmx-kfdj.com/kfhl/minivideo/detail', {params: {ID: id, USER_ID: userid}})
      this.$http.detail({ID: id, USER_ID: userid})
        .then(res => {
          console.log(res)
          this.video_img = res.data.video_img // 视频图片
          this.is_collect = res.data.is_collect // 是否收藏
          this.is_praise = res.data.is_praise // 是否点赞
          this.video_title = res.data.video_title // 视频标题
          this.video_intro = res.data.video_intro // 视频介绍
          this.video_time = this.formatDate(res.data.video_uploadtime) // 视频发布日期
          this.video_collectnum = res.data.video_collectnum // 视频收藏数量
          this.video_commentnum = res.data.video_commentnum // 视频评论数量
          this.video_praisenum = res.data.video_praisenum // 视频点赞数量
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 返回上一页
    goBack () {
      this.$router.go(-1)
    },
    // 点击视频是否成功 http://jmx-kfdj.com/kfhl/minivideo/videoclick
    getPlayUrl (ID) {
      // axios.get('http://jmx-kfdj.com/kfhl/minivideo/videoclick', {params: {ID: ID}})
      this.$http.videoclick({ID: ID})
        .then(res => {
          console.log(res)
          this.getVideo(this.videoTYPE)
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 评论列表 http://jmx-kfdj.com/kfhl/minivideo/getComments
    getComment () {
      // axios.get('http://jmx-kfdj.com/kfhl/minivideo/getComments', {params: {ID: this.videoID}})
      this.$http.getComments({ID: this.videoID})
        .then(res => {
          console.log(res)
          this.commentList = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 评论发布 http://jmx-kfdj.com/kfhl/minivideo/videocomment
    release () {
      if (this.comment.length > 0) {
        // axios.get('http://jmx-kfdj.com/kfhl/minivideo/videocomment', {params:
        //     {ID: this.videoID, USER_ID: this.USER_ID, COMMENT: this.comment}})
        this.$http.videocomment({ID: this.videoID, USER_ID: this.USER_ID, COMMENT: this.comment})
          .then(res => {
            // console.log(res)
            this.getComment()
            this.comment = ''
            // 视频详情
            this.videoDetail(this.videoID, this.USER_ID)
          })
          .catch(err => {
            console.log(err)
          })
      } else {
        console.log('请输入内容')
      }
    },
    // 日期转换
    formatDate (date, dateType) {
      // eslint-disable-next-line no-redeclare
      var date = new Date(date)
      var YY = date.getFullYear() + '-'
      var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
      // var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      if (dateType === 1) {
        return YY + MM + DD + ' ' + hh + mm
      } else {
        return YY + MM + DD
      }
    }
  }
}
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .all {
    width: 100vw;
    height: 92vh;
    background: #FAF9FE;
  }

  .back {
    width: 6vw;
    height: 6vw;
    position: fixed;
    top: 3vw;
    left: 3vw;
    z-index: 999;
  }

  .video {
    width: 100vw;
    /*height: 53vw;*/
    height: 200px;
  }

  .playTitle {
    width: 100%;
    /*height: 43vw;*/
    background-color: white;
  }

  .playTitle ul {
    display: flex;
  }

  .playTitle ul li p a {
    margin-right: 5px;
  }

  .playTitle ul li p {
    width: 92vw;
    /*margin: 0 auto;*/
    /*margin: 4vw auto 4vw 4vw;*/
    margin: 10px 0 5px 15px;
  }

  .playTitle img {
    width: 6vw;
    height: 6vw;
    margin-right: 2vw;
  }

  .playTitle_title {
    font-size: 5vw;
    font-family: PingFang SC;
    /*font-weight: bold;*/
  }

  .playTitle_time {
    font-size: 13px;
    font-family: PingFang SC;
    /*font-weight: bold;*/
    color: #999999;
  }

  .playTitle_bottom {
    font-size: 4vw;
    font-family: PingFang SC;
    /*font-weight: bold;*/
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .playTitle_bottom span {
    display: flex;
    align-items: center;
  }

  /*标签下内容*/
  .footer {
    /*height: 44px;*/
    margin-top: 1vw;
    /*z-index: 9999;*/
  }

  /*标签的字体大小*/
  /deep/ .footer .van-tab {
    font-size: 4vw;
    /*font-weight: bold;*/
  }

  /deep/ .footer .van-tabs--line .van-tabs__wrap {
    height: 15vw;
    z-index: 999;
  }

  /*视频标签下内容*/
  .content {
    display: flex;
    flex-wrap: wrap;
    /*position: relative;*/
    overflow: auto;
    box-sizing: border-box;
  }

  .ulList {
    width: 48%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .ulList:nth-child(even) {
    margin-left: 1.5%;
  }

  .ulList:nth-child(odd) {
    margin-left: 1.5%;
  }

  .ulList:last-child {
    margin-bottom: 15px;
  }

  .time {
    /*display: flex;*/
    /*justify-content: flex-end;*/
    /*margin-top: -25px;*/
    /*height: 20px;*/
    /*line-height: 20px;*/
    /*background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));*/
    /*border-radius: 0px 0px 10px 10px;*/
    font-size: 11px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999;
    margin-top: 5px;
    /*opacity: 0.8;*/
    /*padding-right: 10px;*/
    /*box-sizing: border-box;*/
  }

  .videoImg {
    width: 100%;
    height: 100px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    margin: 10px 0 0 0;
  }

  .li_videoBottom {
    background: #FFFFFF;
    box-shadow: 0px 1px 30px 0px rgba(0, 0, 0, 0.05);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 5px;
    box-sizing: border-box;
  }

  .videoTitle {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    margin-top: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /deep/ .van-tab__text--ellipsis {
    font-weight: bold;
    font-family: PingFang SC;
  }

  /deep/ .van-tab {
    color: #333333;
  }
  .ulList li{
    position: relative;
  }
  .playImg img{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 45%;
    left: 45%;
  }
  .playDuration{
    width: 100%;
    height: 20px;
    text-align: right;
    position: absolute;
    bottom: 5px;
    font-size: 11px;
    color: #fff;
    padding-right: 5px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  }
  .videoIntro {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    margin-top: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .isuser{
    font-size: 11px;
    margin-top: 5px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .isuser span{
    display: flex;
    align-items: center;
  }
  .isuser img{
    margin-right: 5px;
    object-fit: cover;
  }
  .isuser_img{
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }
  .playNumber{
    width: 13px;
    height: 10px;
  }
  /*  评论标签下的内容*/
  .discuss_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /*background-color: white;*/
    box-sizing: border-box;
  }

  .discuss_content {
    width: 100%;
    /*height: 56vw;*/
    display: flex;
    flex-wrap: wrap;
    /*overflow: scroll;*/
    box-sizing: border-box;
  }

  .discuss_content ul:last-child {
    margin-bottom: 17vw;
  }

  .discuss_content ul {
    width: 100%;
    height: auto;
    background-color: #fff;
    margin-bottom: 1vw;
  }

  .discuss_content ul li {
    width: 92%;
    margin: 4vw auto;
  }

  .liTop {
    display: flex;
    flex-direction: row;
  }

  .liTop img {
    width: 17vw;
    height: 17vw;
    border-radius: 50%;
    overflow: hidden;
  }

  .liTop div {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-right: 10px;
  }

  .wx_name {
    font-size: 5vw;
    font-family: PingFang SC;
  }

  .sent_time {
    font-size: 4vw;
    font-family: PingFang SC;
    color: #999999;
  }

  .liBottom span {
    font-size: 15px;
    font-family: PingFang SC;
  }

  .discuss {
    width: 100%;
    height: 16vw;
    /*height: 74px;*/
    background-color: #fff;
    position: fixed;
    bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .discuss .editInput {
    width: 70vw;
    height: 12vw;
    background: #FAF9FE;
    border: none;
    border-top-left-radius: 10vw;
    border-bottom-left-radius: 10vw;
    padding-left: 10px;
    position: relative;
    margin-left: 5vw;
  }

  .discuss .editInput::placeholder {
    font-size: 4.5vw;
  }

  .discuss .editBtn {
    width: 24vw;
    height: 12vw;
    position: relative;
    left: -4vw;
    border-radius: 10vw;
    border: none;
    color: white;
    font-size: 4.5vw;
    font-family: PingFang SC;
    /*font-weight: bold;*/
    background: linear-gradient(90deg, #2F9EE5, #2FD6F2);
  }

  /*详情下的内容*/
  .xiang {
    width: 100%;
  }

  .xiang img {
    width: 100%;
    height: 66vw;
  }
</style>
